<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查看子设备</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link href="../css/public.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
        font-size: 0.8rem;
        position: fixed;
        z-index: 99;
        top: 44px;
      }
      .fixed-title span{
        display: inline-block;
        width: 33%;
        padding: 6px;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
      }
      .fixed-title span:first-child {
        width: 40%;
      }
      
      .fixed-title span:last-child {
        width: 27%;
      }
      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      
      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }
      
      .list>div {
        width: 33%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      
      .list>div:first-child {
        width: 40%;
        
      }
      
      .list>div:last-child {
        width: 27%;
      }
      
      
      /* .arrow:after {
        right: 15px;
        content: '\e583';
      } */
      
      .arrow:after {
        font-family: Muiicons;
        font-size: inherit;
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 2px;
        display: inline-block;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-decoration: none;
        color: #bbb;
        -webkit-font-smoothing: antialiased;
      }
      .text-center{
        text-align: center;
      }
    </style>
	</head>
	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">查看子设备</h1>
      </header>
      <div class="fixed-title">
        <span>设备名称</span>
        <span>功能位置编码</span>
        <span>操作</span>
        <!-- <span>所属项目</span> -->
      </div>
      <div class="mui-content bg-white" style="padding-top: 90px;">
        
         <ul id="groupRule"></ul>
      </div>
    </div>
	</body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../js/mkeyplus.base.js"></script >
  <script src="../js/js.js"></script >
  <script type = "text/javascript" >
      mui.init()
    var mask = null;
    var detailVm = null;
    var cv = null; // 当前webview
    var pageId = ""; //获取详情id
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      pageId = cv.pageId || '';
      console.log(pageId)
       plus.nativeUI.showWaiting('加载中...');
      detailVm.getDetail(pageId)
    })
    detailVm = new Vue({
      el: "#container",
      data: {
        detail: {}
      },
      created: function() {
      },
      methods: {  
        godetail: function(item) {
          mui.openWindow({
            url: '../file/fileDetail.html',
            id: '../file/fileDetail.html',
            createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
            extras:{
              pageId:item.dataId
            }
          })
        },
        getDetail: function(pageId) {
           var that=this
          mui.baseApp.httpRequst("/api/metadataDocument/getAllChildDocuments", {
          isTree: true, parentId: pageId
          }, function(data) {
            $("#groupRule").groupRule({
              title: '',
              mdmCode: '',
              childDocumentFlag: true,
              data: data,
              effect: 200
            });
            that.detail=data
           plus.nativeUI.closeWaiting();
          }, function() {
            plus.nativeUI.closeWaiting();
            console.log("获取数据失败");
          })
        },
      },
      
    })

  </script>
</html>
